<template>
  <div class="box">
    <!-- <titleHead :Crumbs="Crumbs" class="headTitle"></titleHead> -->
    <!-- 所有分组 -->
    <div class="bigBox">
      <div class="title">{{title}}</div>
      <div class="border">
        <div class="screen">
          <div class="search_group">
            <input type="text" placeholder="请在此输入搜索内容" v-model="search_gorup" />
            <el-button @click="confirm_search">搜索</el-button>
            <el-button @click="new_gorup">新建分组</el-button>
          </div>
          <div class="search_group" v-show="isShow">
            <span>设备分组选择</span>
            <el-select v-model="equipment_name" placeholder="请选择" @change="DeviceSwitching">
              <el-option
                v-for="item in equipment"
                :key="item.name"
                :label="item.name"
                :value="item.imcType"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="ovf">
          <div class="center">
            <div class="tableRoll">
              <el-table :data="All_group_list" border style="width: 100%">
                <el-table-column label="序号" type="index" width="118"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="memo" label="描述" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div class="operation">
                      <span @click="groupID(scope.row.id)">修改分组</span>
                      <span @click.stop="put_gourps(scope.row)">修改名称</span>
                      <span @click.stop="del(scope.row.id)">删除</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="block">
              <el-pagination
                layout="prev, pager, next"
                :current-page="page"
                :page-size="10"
                :total="total"
                @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
            <!-- 显示选中的组 -->
          </div>
        </div>
        <!-- 添加分组 -->

      </div>
    </div>
 <div class="Mask" v-show="Mask">
          <div class="name_ipt">
            <div class="tips">
              <span>{{Distinguish}}</span>
              <i @click="Close_window" class="el-icon-close"></i>
            </div>
            <div class="box_txt">
              <div class="NewgroupName">
                <input type="text" placeholder="请输入组名" v-model="groupName.name" />
              </div>
              <div class="txt">
                <textarea placeholder="请输入组描述" v-model="groupName.memo"></textarea>
              </div>
              <div class="btn">
                <el-button @click="add_name">确定</el-button>
              </div>
            </div>
          </div>
        </div>
    <div class="Mask" v-show="modifyShow">
      <div class="modify">

        <div class="modify2">
          <div class="Roll">
            <div class="title">
              已经选择的设备
              {{this.data.imcDevices.length}}个
            </div>
            <div class="serch">
              <input type="text" placeholder="请输入搜索内容" v-model="serch" />
            </div>
            <div class="tipc">
              <span>设备名称</span>
              <span>类型</span>
              <span>操作</span>
            </div>
            <ul class="container containerLast">
              <li v-for="(item,index) in newelecLoops" :key="index">
                <!-- <span>{{item.name}}</span> -->
                <span
                  :title="item.name"
                >{{item.name.length>9 ? item.name.slice(0,10)+"..":item.name}}</span>
                <span>{{item.imcType | equipmentType}}</span>
                <span @click="delLoop(item,index)">移除</span>
              </li>
            </ul>
          </div>
          <!-- 未选中的分组 -->
          <div class="Roll">
              <div class="colseGroup">
                <i class="el-icon-close" @click="colseGroup"></i>
              </div>
            <div class="title">未分组的设备共{{Choice.length}}个</div>
            <div class="serch">
              <input type="text" placeholder="请输入搜索内容" v-model="serch2" />
            </div>
            <div class="tipc">
              <span>设备名称</span>
              <span>类型</span>
              <span>添加分组</span>
            </div>
            <ul class="container containerLast">
              <li v-for="(item,index) in newelecLoops2" :key="index" :class="{disp2}">
                <span
                  :title="item.name"
                >{{item.name.length>10 ? item.name.slice(0,10)+"..":item.name}}</span>
                <span>{{item.imcType | equipmentType}}</span>
                <span @click="Selection(item,index)">添加</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="Create">
          <el-button type="primary" @click="Create">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import titleHead from "../title.vue";
export default {
  components: {
    // titleHead
  },
  props: ["imcType", "title",'isShow'],
  data() {
    return {
      Crumbs: ["夜景照明管理系统", "分组管理"],
      disp: true,
      disp2: false,
      Choice: [],
      Selected: [],
      All_group_list: [], //组列表
      multipleSelection: [], //组多选
      // 新建组 组名
      groupName: {
        name: "",
        memo: "",
        imcType: ""
      },
      // groupMemo:"",
      data: {
        imcDevices: [],
        id: null,
        name: "",
        mome: ""
      },
      total: 0, //已经分组的
      page: 1, //已经分组的
      Mask: false,
      activeClass: null,
      flag: 0,
      Distinguish: "",
      total1: 0,
      page1: 0,
      search_gorup: "",
      serch: "", //搜索已经选中的
      serch2: "", //搜索为选中的
      equipment: [
        {
          name: "单灯控制器",
          imcType: "1"
        },
        {
          name: "气象传感器",
          imcType: "2"
        },
        {
          name: "显示屏",
          imcType: "3"
        },
        {
          name: "WIFI-AP节点",
          imcType: "4"
        },
        {
          name: "摄像头",
          imcType: "5"
        }
      ],
      equipment_name: "1",
      modifyShow: false
    };
  },
  mounted() {
    this.GroupingLoop();
    this.GroupsList();
  },
  computed: {
    newelecLoops() {
      return this.data.imcDevices.filter(v => {
        return v.name.startsWith(this.serch);
      });
    },
    newelecLoops2() {
      return this.Choice.filter(v => {
        return v.name.startsWith(this.serch2);
      });
    }
  },
  filters: {
    equipmentType(e) {
      if (e == 0 || e == "回路") {
        return "回路";
      } else if (e == 1 || e == "灯头"|| e == "单灯控制器") {
        return "单灯控制器";
      } else if (e == 2 || e == "气象传感器") {
        return "气象传感器";
      } else if (e == 3 || e == "广播屏幕"|| e == "显示屏") {
        return "显示屏";
      } else if (e == 4 || e == "wifi") {
        return "wifi";
      } else if (e == 5 || e == "摄像头") {
        return "摄像头";
      }
    }
  },
  methods: {
    //区别用于什么分组
    DeviceSwitching(e) {
      this.search_gorup=""
      switch(e){
        case "1":
          this.title = "单灯控制器分组管理";
          break;
        case "2":
          this.title="气象传感器分组管理"
          break;
        case "3":
          this.title="广播屏幕分组管理"
          break;
        case "4":
          this.title="WIFI-AP节点分组管理"
          break;
        case "5":
          this.title="摄像机"
          break
      }
      this.activeClass = null;
      this.data.imcDevices = [];
      this.imcType = e;
      this.GroupingLoop();
      this.GroupsList();
    },
    // 修改组名
    put_gourps(e) {
      this.Distinguish = "修改";
      this.Mask = true;
      this.groupName = e;
    },
    Close_grousShow() {
      this.grousShow = false;
    },
    //新建组名
    new_gorup() {
      this.Distinguish = "新建组名";
      this.Mask = true;
      this.groupName = {};
    },
    Close_window() {
      this.GroupsList();
      this.Mask = false;
    },
    colseGroup() {
      this.modifyShow = false;
    },
    // 组名创建
    add_name() {
      this.groupName.imcType = this.imcType;
      if (!this.groupName.memo || this.groupName.memo.trim().length == 0) {
        this.$message.warning("请对此组进行备注");
        return;
      }
      if (this.Distinguish == "修改") {
        this.$http
          .post("/api/threesuns/deviceGroup/update", this.groupName)
          .then(res => {
            if (res.data.code == "200") {
              this.Close_window();
              this.$message.success(res.data.message);
              this.GroupsList();
            } else {
              this.$message.warning(res.data.message);
            }
          })
          .catch(err => {
            this.$message.error(res.data.message);
          });
      } else {
        this.$http
          .post("/api/threesuns/deviceGroup/create", this.groupName)
          .then(res => {
            if (res.data.code == "200") {
              this.Close_window();
              this.$message.success(res.data.message);
              this.GroupsList();
            } else {
              this.$message.warning(res.data.message);
            }
          })
          .catch(err => {
            this.$message.error(res.data.message);
          });
      }
    },
    Create() {
      this.data.imcType = this.imcType;
      // console.log(this.data);
      // this.data.elecLoops=newelecLoops
      if (this.flag == 0) {
        this.$message.warning("请您先选择要操作的分组");
        return;
      }
      this.$http
        .post("/api/threesuns/deviceGroup/update", this.data)
        .then(res => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.modifyShow = false;
            this.flag == 0;
            this.activeClass = null;
            this.data.imcDevices = [];
            this.GroupingLoop();
            this.GroupsList();
            this.serch = "";
            this.serch2 = "";
          } else {
            this.$message.success(res.data.message);
          }
        });
    },
    // -------------回路选择-------------
    // 为选中的分组添加到分组里面
    Selection(val, index) {
      var newelecLoops2Id = null;
      var ChoiceId = null;
      // 删除搜索的
      for (var j = 0; j < this.newelecLoops2.length; j++) {
        newelecLoops2Id = this.newelecLoops2[j].id;
        if (newelecLoops2Id == val.id) {
          this.data.imcDevices.unshift(val);
        }
      }
      // 删除请求来的
      for (var i = 0; i < this.Choice.length; i++) {
        ChoiceId = this.Choice[i].id;
        if (ChoiceId == val.id) {
          this.Choice.splice(i, 1);
        }
      }
    },
    //  从已经选中的数组里面移除
    delLoop(val, index) {
      let newelecLoopsId = null;
      let imcDevicesId = null;
      // 删除搜索的
      for (var i = 0; i < this.newelecLoops.length; i++) {
        newelecLoopsId = this.newelecLoops[i].id;
        if (newelecLoopsId === val.id) {
          this.newelecLoops.splice(index, 1);
          this.Choice.unshift(val);
        }
      }
      // 删除请求来的
      for (var i = 0; i < this.data.imcDevices.length; i++) {
        imcDevicesId = this.data.imcDevices[i].id;
        if (imcDevicesId == val.id) {
          this.data.imcDevices.splice(i, 1);
        }
      }
    },
    // 获取单个组回路的信息  要做搜索的地方
    groupID(e, index) {
      this.modifyShow = true;
      this.serch = "";
      this.serch2 = "";
      this.data.imcDevices = [];
       this.Choice=[]
      this.GroupingLoop();
      this.flag = 1;
      this.activeClass = index;
      this.$http
        .get("/api/threesuns/deviceGroup/get", {
          params: {
            id: e,
            imcType: this.imcType
          }
        })
        .then(res => {
          if (res.data.code == "200") {
            this.data.imcDevices = res.data.data.imcDevices;
            this.data.id = res.data.data.id;
            this.data.name = res.data.data.name;
            this.data.memo = res.data.memo;
            this.data = res.data.data;
          }
        });
    },
    loop_page(e) {
      this.page1 = e;
      this.GroupingLoop();
    },
    // 所有回路可分组的回路
    GroupingLoop() {
      this.$http
        .get("/api/threesuns/deviceGroup/imcDevices/get", {
          params: {
            imcType: this.imcType
          }
        })
        .then(res => {
          if (res.data.code == "200") {

            this.Choice = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    // ------------------------所有分组--------------------------------
    del(e) {
      this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .delete("/api/threesuns/deviceGroup/delete", {
              params: {
                ids: e,
                imcType: this.imcType
              }
            })
            .then(res => {
              if (res.data.code == "200") {
                if (index == this.activeClass) {
                  this.this.activeClass = null;
                }
                this.$message.success(res.data.message);
                this.GroupsList();
              } else {
                this.$message.warning(res.data.message);
                this.GroupsList();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 所有分组请求分页
    handleCurrentChange(e) {
      this.page = e;
      this.GroupsList();
    },
    confirm_search() {
      this.page = 1;
      this.GroupsList();
    },
    // 获取所有分组
    GroupsList() {
      this.$http
        .get("/api/threesuns/deviceGroup/list/get", {
          params: {
            groupName: this.search_gorup,
            id: "",
            page: this.page - 1,
            size: 10,
            imcType: this.imcType
          }
        })
        .then(res => {
          this.All_group_list = res.data.data;
          this.total = res.data.total;
        });
    }
  }
};
</script>
<style scoped>
@import url("../../../assets/css/table.css");
.box {
  position: relative;
  width: 100%;
  /* background: url("../../../assets/image/strategy_add.jpg"); */
  /* min-width: 1550px; */
}

.CustomName {
  margin: 40px auto;
  height: 150px;
}
.CustomName input {
  width: 400px;
  height: 30px;
  border: none;
  border: 1px solid #ffffff;
  margin-top: 35px;
  padding-left: 30px;
  margin-left: 200px;
}
.Roll {
  height: 400px;
  width: 498px;
  float: left;
  height: 630px;
  margin-left: 15px;
  border: 1px solid #fff;
  background-color: #011615;
  position: relative;
}

.container {
  width: 497px;
  height: 470px;
}
.container input {
  width: 325px;
  height: 30px;
  border: none;
  border: 1px solid #ccc;
  margin-right: 15px;
}
.container .Tips {
  background: none;
  text-align: center;
  margin-top: 150px;
}
.container span {
  display: inline-block;
  width: 165px;
  text-align: center;
  color: #c5c5c5;
  line-height: 35px;
  border-right: 1px solid #fff;
}
.container span:last-child {
  border: none;
}
.container li {
  width: 492px;
  border-bottom: 1px solid #ffff;
  border-right: 1px solid #ffff;
  display: flex;
}
.container li span:nth-child(2) {
  width: 158px;
}
.container .el-button {
  padding: 0;
  width: 50px;
  height: 30px;
  line-height: 30px;
}
.container :hover {
  cursor: pointer;
}
.ovf {
  height: 672px;
  margin: 0 auto;
}
.center {
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0px 1px 14px 0px #0dc2c3 inset;
}
.headTitle {
  margin-bottom: 30px;
}
.del {
  float: right;
}
.Create {
  margin-top: 30px;
  text-align: center;
}
.title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  background-color: #1d938d;
  padding: 10px;
  color: #ffffff;
}
.Mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  z-index: 5;
}
.Close {
  height: 30px;
  background-color: #0dc2c3;
  line-height: 30px;
  /* float: right; */
  color: #fff;
}
.Close span {
  float: right;
  margin-right: 30px;
}
.Close :hover {
  cursor: pointer;
}
.list {
  width: 648px;
  background-color: #fff;
  margin: 200px auto;
}
.page {
  width: 400px;
  margin: 40px auto;
}
/deep/ .el-button--primary {
  background-color: #0dc2c3;
}
.search_group {
  display: inline-block;
}
.search_group input {
  width: 455px;
  margin-right: 20px;
  height: 28px;
  background: none;
  border: 1px solid #fff;
  padding-left: 41px;
  margin-left: 55px;
  outline: none;
  color: #fff;
}
.search_group .el-button {
  margin-right: 20px;
  padding: 10px 15px;
  background: #26aea1;
  color: #fff;
}
/deep/ .el-table__empty-block {
  display: none;
}
.tipc {
  background-color: #055555;
  border: 1px #ffffff solid;
  font-size: 18px;
  display: flex;
}
.tipc span {
  display: inline-block;
  width: 165px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  border-right: 1px solid #fff;
}

.tipc span:last-child {
  border: none;
}
.tipc span :nth-child(1) {
  width: 169px;
}
.serch {
  height: 40px;
  line-height: 40px;
}
.serch input {
  width: 200px;
  height: 32px;
  margin-left: 5px;
  padding-left: 10px;
  background: none;
  border: none;
  border: 1px solid #fff;
  outline: none;
  color: #ffff;
}
.name_ipt {
  width: 400px;
  height: 400px;
  background-color: #011615;
  margin: 200px auto;
}
.name_ipt input {
  height: 30px;
  background: none;
  outline-color: none;
  border: none;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  vertical-align: bottom;
}
.tips {
  height: 42px;
  line-height: 42px;
  background-color: #1d938d;
  color: #fff;
  text-align: center;
  font-size: 16px;
}
.tips span {
  margin-left: 30px;
  font-weight: 700;
  font-size: 20px;
}
.tips i {
  float: right;
  margin-right: 30px;
  margin-top: 14px;
  font-size: 18px;
}
.tips i:hover {
  cursor: pointer;
}
.txt {
  margin-top: 20px;
  background: none;
}
.txt textarea {
  width: 377px;
  height: 200px;
  resize: none;
  background: none;
  color: #fff;
  font-size: 16px;
  border: 1px solid #fff;
}
.block {
  /* margin:auto; */
  text-align: center;
}
.container .active {
  background-color: #1d938d;
}
.btn {
  width: 100px;
  margin: 20px auto;
  text-align: center;
}
.btn .el-button {
  background: #1d938d;
  color: #fff;
  padding: 8px 20px;
  /* margin-left: 15px; */
}
.tableRoll {
  height: 666px;
  overflow-y: scroll;
}
.containerLast {
  overflow-y: scroll;
  height: 505px;
}
.tableRoll::-webkit-scrollbar,
.containerLast::-webkit-scrollbar {
  width: 3px;
}

.tableRoll::-webkit-scrollbar-track,
.containerLast::-webkit-scrollbar-track {
  /* background: #ccc; */
  background: #1d938d;
}

.tableRoll::-webkit-scrollbar-thumb,
.containerLast::-webkit-scrollbar-thumb {
  background: #fff;
}
.containerLast li span:nth-child(1) {
  width: 171px;
}

.containerLast li span:nth-child(2) {
  width: 170px;
}
/deep/ .el-pagination button:disabled {
  background-color: rgba(0, 0, 0, 0);
}
/deep/ .el-pager li {
  background-color: rgba(0, 0, 0, 0);
}
/deep/ .el-pagination .btn-next,
/deep/ .el-pagination .btn-prev {
  background: none;
}
i {
  font-style: normal;
}
.NewgroupName {
  text-align: center;
  padding-top: 20px;
}
.box_txt {
  padding: 10px;
  border: 1px solid #fff;
  box-shadow: 0px 2px 37px 4px #0a7e7e inset;
}
/deep/ .el-input__inner {
  width: 150px;
  height: 32px;
  line-height: 32px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
  color: #fff;
}
/deep/ .el-input__icon {
  height: 32px;
  line-height: 32px;
}
.bigBox {
  width: 1416px;
  margin: 55px auto;
  margin-bottom: 0;
}
.bigBox > .title {
  font-size: 22px;
  padding-top: 3px;
  height: 40px;
  line-height: 40px;
  padding-bottom: 3px;
}
.screen {
  height: 60px;
  line-height: 66px;
  color: #fff;
  padding-left: 15px;
  border: 1px solid #0dc2c3;
  box-shadow: 0px 1px 6px 0px #0dc2c3 inset;

}
/* /deep/ .el-input--suffix {
  height: 55px;
} */
.screen span {
  font-size: 20px;
  margin-right: 15px;
  font-weight: 700;
  vertical-align: bottom;
}
.disp {
  display: none;
}
.disp2 {
  display: none;
}
.border {
  background-color: #011615;
  padding-bottom: 25px;
}
.modify {
  /* position: relative; */
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
.modify2 {
  margin-top: 70px;
  display: flex;
  justify-content: center;
}
.colseGroup {
  position: absolute;
  right: 5px;
  top:-50px;
  color: #fff;
  font-size: 40px;
  z-index: 555;
}
/deep/ .operation {
  display: flex;
  justify-content: space-around;
}
.operation:hover{
  cursor: pointer;
}
</style>
